<script setup lang="ts">
import {storeToRefs} from "pinia";
import useHospitalStore from "@/pinia/hospitalStore.ts";

const hospitalStore = useHospitalStore()
const {hospitalDetail} = storeToRefs(hospitalStore)
</script>

<template>
  <div class="detail">

      <div class="top">
        <span class="hosname">{{ hospitalDetail.hospital?.hosname }}</span>
        <div class="level-info">
          <i class="iconfont icon-paiming"></i>
          <span class="level">{{ hospitalDetail.hospital?.param?.hostypeString }}</span>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <el-avatar :size="90" :src="`data:image/jpeg;base64,${hospitalDetail?.hospital?.logoData}`">
            <img src="@/assets/images/logo.png"/>
          </el-avatar>
        </div>
        <div class="right">
          <div class="number">
            <div class="rules">挂号规则</div>
            <div class="time">预约周期: 10天 放号时间{{ hospitalDetail.bookingRule?.releaseTime }}: 停挂时间:{{ hospitalDetail.bookingRule?.quitTime }}</div>
            <div class="logout">退号时间: 就诊前一工作日15:30前取消</div>
            <div class="address">医院地址: {{ hospitalDetail.hospital?.param?.fullAddress }}</div>
            <div class="route">医院路线: {{ hospitalDetail.hospital?.route }}</div>
          </div>
          <div class="hos">
            <div class="rules">医院的介绍</div>
            <div class="message">{{ hospitalDetail.hospital?.intro }}</div>
          </div>
        </div>
      </div>

  </div>
</template>

<style scoped lang="scss">
.detail {
  padding-top: 30px;
  padding-left: 30px;

  .top {
    display: flex;
    align-items: center;

    .hosname {
      font-size: 20px;
      font-weight: 700;
    }

    .level-info {
      margin-left: 30px;
      color: #7f7f7f;
    }
  }

  .content {
    padding-top: 50px;
    display: flex;

    .left {
      display: flex;
      align-items: center;

      .el-avatar {
        background-color: #ffffff;
        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .right {
      flex: 1;
      margin-top: 10px;
      padding-left: 20px;

      .number {
        margin-bottom: 50px;
      }

      .rules {
        color: #000;
        font-size: 16px;
      }

      div {
        color: #7f7f7f;
        margin-top: 10px;
        font-size: 14px;
      }

      .message {
        line-height: 30px;
      }

    }
  }
}
</style>
